<template>
  <div class="sample-tutorial">
    <div id="ss" class="sample-spreadsheets"></div>
    <div class="options-container">
      <div class="option-row">
        <div class="inputContainer">
          <input type="file" id="fileDemo" class="input">
          <input type="button" id="loadExcel" value="import" class="button">
        </div>
        <div class="inputContainer">
          <input id="exportFileName" value="export.xlsx" class="input">
          <input type="button" id="saveExcel" value="export" class="button">
        </div>
      </div>
      <div class="option-row">
        <div class="group">
          <label>Password:
            <input type="password" id="password">
          </label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
  import GC from "@grapecity/spread-sheets";
  import "@grapecity/spread-sheets-vue";
  import "@grapecity/spread-sheets-resources-zh";
  import ExcelIO from "@grapecity/spread-excelio";
  import FaverSaver from "file-saver";
  import "@grapecity/spread-sheets-print";
  export default {
    data() {
      return {
        excelIo: null
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { calcOnDemand: true });
        // spread.fromJSON(jsonData);
        this.excelIo = new ExcelIO.IO();
        var sheet = spread.getActiveSheet();
        let self = this
        document.getElementById('loadExcel').onclick = function () {
          var excelFile = document.getElementById("fileDemo").files[0];
          var password = document.getElementById('password').value;
          // here is excel IO API
          self.excelIo.open(excelFile, function (json) {
            var workbookObj = json;
            spread.fromJSON(workbookObj);
          }, function (e) {
            // process error
            alert(e.errorMessage);
            if (e.errorCode === 2/*noPassword*/ || e.errorCode === 3 /*invalidPassword*/) {
              document.getElementById('password').onselect = null;
            }
          }, { password: password });
        };
        document.getElementById('saveExcel').onclick = function () {
          var fileName = document.getElementById('exportFileName').value;
          var password = document.getElementById('password').value;
          if (fileName.substr(-5, 5) !== '.xlsx') {
            fileName += '.xlsx';
          }
          var json = spread.toJSON();
          console.log(json);
          // here is excel IO API
          this.excelIo.save(json, function (blob) {
            saveAs(blob, fileName);
          }, function (e) {
            // process error
            console.log(e);
          }, { password: password });

        };
      }
    }
  }
</script>